<template>
  <view class='class_page' :style="{paddingTop:head_height+'px'}">
    <!-- 专题 -->
    <view class='head' :style='{top:nav_height+"px"}'>
      <screen 
        :headTab_index='-1' 
        :head_height='head_height'
        :class_list='class_Arr'
        :classChild_Arr='classChild_Arr'
        :class_on='class_on'
        :dateIndex='dateIndex'
        :dateArr='date_arr'
        :sortStatus='sort_status'
        :emotion='emotion_status'
        @classRes="getcClassSelectRes"
        @sort='sort'
        @date='getDate'
        @searchContent='search'
        @emotionStatus='geteMotionStatus'
      ></screen>
      <view class='item_list'>
        <scroll-view class='tab_box' scroll-x='true' :scroll-left='scroll_left'>
            <view
              class='item' 
              :class='{tabBar_on:headTab_index == tab_index}'
              v-for='(tab_item,tab_index) in tab' :key='tab_index'
              @tap='switchTab(tab_index,tab_item.name)'>
              <view :class='"item"+tab_index'>{{tab_item.total}}</view>
            </view>
        </scroll-view>
      </view>
    </view>

    <loading :status='load_status'></loading>
    <!-- 内容 -->
    <swiper 
      class="swiper"
      @change='swiperChange' 
      :current='headTab_index'>
        <swiper-item class='swiper-item' v-for='(item,index) in tab' :key='index'>
            <view class='list'>
              <list2 :list='list_data'></list2>
              <hint :status='hint_status'></hint>
            </view>
        </swiper-item>
    </swiper>
  </view>
</template>

<script>

  import list2 from '../components/list2.vue'

  export default {
    components: {
      list2,
    },
    props: {
      reach_bottom: Number,
      pull_down: Number,
    },
    data() {
      return {
        tab: [],
        headTab_index: 0,
        head_height: 0,
        scroll_left: 0,

        class_list: [],
        class_Arr: [],
        classChild_Arr: [],
        class_on: [],

        ruleId: '',
        sort_status: 'desc',
        source: [],
        date_arr: [],
        keyword: '',
        emotion_arr: ["1","0","-1"],
        list_data: [],
        page: 1,
        total: 0,

        dateIndex: 0,
        emotion_status: null,

        load_status: 0,
        hint_status: 0,
      }
    },
    computed: {
      nav_height() {
        return this.$store.state.nav_height;
      },
      navTab_index() {
        return this.$store.state.navTab_index;
      },
    },
    watch: {
      nav_height() {
        this.computeHeadHeight()
      },
      navTab_index() {
        this.computeHeadHeight()
      },
      // 下拉刷新
      pull_down() {
        this.load_status = 1;
        this.page = 1;
        this.getListData("down")
      },
      // 触底
      reach_bottom() {
        if(this.list_data.length >= this.total) {
          this.hint_status = 2;
          return
        }
        this.page++;
        this.getListData()
      },
      
    },
    mounted() {
      this.computeHeadHeight();
      this.getClass();
    },
    methods: {
      // 获取列表数据
      getListData(type="") {
        this.hint_status = 1;
        this.$http({
          url: this.$api.topic.list,
          data: {
            ruleId: this.ruleId,
            startTime: this.date_arr[0],
            endTime: this.date_arr[1],
            source: this.source,   // 站点类型
            keyword: this.keyword,
            sentiment: this.emotion_arr,       // 情感
            pageIndex: this.page,
            pageSize: 10,
            sort: this.sort_status,
            matchMode: 1,     //  1为标题加正文，2为仅标题，3为仅正文，4为仅ocr
            
          }
        }).then( res => {
          if(res.code == 0) {
            this.hint_status = 2;
            if(this.page == 1) {
              this.getTotal();
            }
            if(type == "down") {
              this.list_data = [];
              uni.stopPullDownRefresh();
              this.load_status = 2;
            }
            this.total = res.data.total;
            res.data.list.forEach( val => {
              this.list_data.push(val)
            })
            
          }
        })
      },
      // 获取分类列表
      getClass() {
        this.$http({
          url: this.$api.topic.class_arr,
          data: {
            type: 1
          }
        }).then( res => {
          if(res.code == 0) {
            
            this.class_list = res.data;
            let max_time = 0;
            let max_index = [0,0];
            res.data.forEach((val,index) => {
                let arr = [];
                val.children.forEach((el,el_index) => {
                  arr.push(el.ruleName)
                  if(el.addOn > max_time) {
                    max_time = el.addOn;
                    max_index[0] = index;
                    max_index[1] = el_index;
                  }
                })
                this.class_Arr.push(val.name);
                this.classChild_Arr.push(arr);
            });
            this.class_on = max_index;
            this.ruleId = res.data[max_index[0]].children[max_index[1]].ruleId;
            this.initListData();
          }
        })
      },
      // 获取文章数量
      getTotal() {
        this.$http({
          url: this.$api.topic.total,
          data: {
            ruleId: this.ruleId,
            startTime: this.date_arr[0],
            endTime: this.date_arr[1],
            sentiment: this.emotion_arr,
            keyword: this.keyword,
          }
        }).then( res => {
          if(res.code == 0) {
            this.tab = [];
            res.data.forEach( val => {
                let obj = {
                  total: val.nameCN+"("+val.num+")",
                  name: val.name
                }
                this.tab.push(obj)
            });
          }
        })
      },
      // 重新请求数据
      initListData() {
        this.load_status = 1;
        this.page = 1;
        this.getListData("down");
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
      },
      // 获取分类选择的结果
      getcClassSelectRes(e) {
        let res = this.class_list[e[0]].children[e[1]]
        this.ruleId = res.ruleId;
        this.headTab_index = 0;    // 返回全部
        this.date_arr = [];        // 初始化时间
        this.dateIndex = 0;
        this.sort_status='desc';   // 初始化排序
        this.keyword = "";         // 初始化搜索框
        this.emotion_arr = ["1","0","-1"];  // 初始化情感
        this.initListData();
      },
      // 获取情感状态
      geteMotionStatus(status) {
        this.emotion_status = status;
        if(status == null) {
          this.emotion_arr = [-1,1,0]
        }else {
          this.emotion_arr = [status];
        }
        this.initListData();
      },
      // 排序
      sort(e) {
        e ? this.sort_status = "asc" : this.sort_status='desc'
        this.initListData()
      },
      // 日期筛选
      getDate(e) {
        this.date_arr = e.date;
        this.initListData();
        this.dateIndex = e.date_index;
      },
      // 搜索
      search(e) {
        this.keyword = e;
        this.sort_status='desc';   // 初始化排序
        this.emotion_arr = ["1","0","-1"];  // 初始化情感
        this.initListData();
      },
      // 切换tab
      switchTab(index,name) {
        this.headTab_index = index;
        name == "all" ? this.source = [] : this.source[0] = name;
        // this.sort_status='desc';   // 初始化排序
        this.initListData();
        this.getLeft(index);
      },
      // 打开选择分类
      openClass() {
        uni.navigateTo({
          url: '../search/classSearch'
        });
      },
      // 左右翻页
      swiperChange(e) {
        let name = this.tab[e.detail.current].name;
        if(this.hint_status == 1) return
        this.switchTab(e.detail.current,name);
      },
      // 计算滚动距离
      getLeft(index) {
        let self = this;
        let class_name = ".item"+index;
        let query = uni.createSelectorQuery().select(class_name);
        query.boundingClientRect((data) => {
          self.scroll_left = data.left * index
         }).exec()
      },
      // 计算页面头部高度和内容
      computeHeadHeight() {
        this.$nextTick(async () => {
          let info = await this.$getDomInfo(".head");
          this.head_height = this.nav_height + info.dom_info.height;
        })
        
      },
    }
  }
</script>

<style lang="scss" scoped>
.class_page {
  width: 100%;
  padding-top: 100upx;
  .head {
    .item_list {
      width: 100%;
      // padding-right: 100upx;
      display: flex;
      border-bottom: 1px solid #eee;
      box-sizing: border-box;
      .tab_box {
        width: 100%;
        height: 88upx;
        white-space: nowrap;
        .item {
          height: 88upx;
          display: inline-block;
          color:#666;
          font-size: 28upx;
          position: relative;
          >view {
            height: 100%;
            line-height: 88upx;
            padding: 0 20upx;
            box-sizing: border-box;
          }
        }
        .tabBar_on {
          &::after {
            bottom: 0;
          }
        }
      }
      // .icon_item {
      //   width: 10%;
      //   height: 88upx;
      //   display: flex;
      //   align-items: center;
      //   justify-content: center;
      //   color: #999;
      // }
    }
  }
  .list {
    padding-bottom: 100upx;
    box-sizing: border-box;
  }
}
</style>